<script setup>
import { Input, Select, DatePicker } from '@arco-design/web-vue'
import { useFullscreen } from '@vueuse/core'
import { VueDraggableNext as draggable } from 'vue-draggable-next'
const props = defineProps({
  columns: {
    type: Array,
    require: true,
  },
  formColumns: {
    type: Array,
    default: () => []
  },
  hideSearch: {
    type: Boolean,
    default: false
  }
})

const columns = computed(() => props.columns.filter(o => !o.hide))

const tableColumns =  ref([...columns.value])

const firstIndex = ref(null);
const lastIndex = ref(null);

columns.value.forEach((item, index) => {
  if (item.fixed === 'left') {
    firstIndex.value = index;
  }
  if (lastIndex.value === null && item.fixed === 'right') {
    lastIndex.value = index;
  }
});

const showSearch = ref(props.hideSearch)

const componentMap = {
  'Input': Input,
  'Select': Select,
  'DatePicker': DatePicker
}

const formData = ref({

})

const tableSize = ref('medium')
const tableRef = ref(null)

const { isFullscreen, enter, exit, toggle } = useFullscreen(tableRef)

const handleSizeSelect = (value) => {
  tableSize.value = value;
}

const handleSearch = () => showSearch.value = !showSearch.value;

const columnChecked = ref([
  ...columns.value.filter(o => !o.defaultHide).map(o => o.dataIndex)
])

const columnChange = () => {

}

const draggableCheckMove = ({ draggedContext = {} }) => {
  const { futureIndex } = draggedContext;
  //不能移动到最后一个fixed='left'的前面
  return (
    (firstIndex.value === null || futureIndex > firstIndex.value) &&
    (lastIndex.value === null || futureIndex < lastIndex.value)
  );
};

</script>

<template>
  <div ref="tableRef" class="table-wrapper">
    <div class="table-search-form">
      <a-form :model="formData" v-if="showSearch">
        <a-row :gutter="16">
          <template v-for="searchItem in props.formColumns">
            <a-col :span="6">
              <a-form-item :field="searchItem.field" :label="searchItem.label">
                <component :is="componentMap[searchItem.component]" v-bind="searchItem.componentProps" />
              </a-form-item>
            </a-col>
          </template>
        </a-row>
      </a-form>
      <slot name="table-search-form"></slot>
    </div>
    <div class="table-title">
      <div class="flex items-center justify-between px-1 mb-2">
        <slot name="table-title"></slot>
        <div>
          <a-button shape="circle" @click="handleSearch">
            <icon icon="material-symbols:search-rounded" />
          </a-button>
          <a-dropdown @select="handleSizeSelect">
            <a-button shape="circle" class="ml-2">
              <icon icon="fe:text-size" />
            </a-button>
            <template #content>
              <a-doption value="mini">迷你</a-doption>
              <a-doption value="small">紧凑</a-doption>
              <a-doption value="medium">正常</a-doption>
              <a-doption value="large">超大</a-doption>
            </template>
          </a-dropdown>

          <a-button shape="circle" class="ml-2" @click="toggle">
            <icon icon="ic:outline-fullscreen" />
          </a-button>
          <a-popover position="br" trigger="click">
            <a-button shape="circle" class="ml-2">
              <icon icon="ph:columns" />
            </a-button>
            <template #content>
              <a-checkbox-group v-model="columnChecked" @change="columnChange" direction="vertical">
                <draggable :list="tableColumns" @update="draggableCheckMove" :move="draggableCheckMove" item-key="dataIndex" animation="300" handle=".draggable">
                  <div class="flex items-center" v-for="col in tableColumns" :key="col.dataIndex" :draggable="true">
                    <icon icon="carbon:move" class="mr-2 cursor-move draggable" />
                    <a-checkbox :value="col.dataIndex">{{ col.title }}</a-checkbox>
                  </div>
                </draggable>
              </a-checkbox-group>
            </template>
          </a-popover>
        </div>
      </div>
    </div>
    <div class="table-main">
      <a-table v-bind="$attrs" :size="tableSize" :columns="tableColumns.filter(o => columnChecked.includes(o.dataIndex))">
        <template v-for="(slot, slotName) in $slots" #[slotName]="data" :key="slotName">
          <slot :name="slotName" v-bind="data"></slot>
        </template>
      </a-table>
    </div>
  </div>
</template>

<style lang="less" scoped>
.table-wrapper {
  background-color: var(--color-bg-1);
}
</style>